<template>
  <div class="home">
    <div class="header-wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>

      <div class="icon">分类四宫格</div>
    </div>

    <my-title @click="gotoList('/bargainList')">
      <span>全民砍价</span>
    </my-title>

    <my-title @click="gotoList('/articleList')">
      <span>文章列表</span>
    </my-title>
    <div class="news-wrap">
      <ul>
        <li v-for="item in newsList" :key="item.id">
          <img :src="item.pic" alt="" />
          <h5>{{ item.title }}</h5>
          <p>{{ item.descript }}</p>
        </li>
      </ul>
    </div>

    <my-title @click="gotoList('/recommendList')">
      <span>人气推荐</span>
    </my-title>

    <div class="good-wrap">
      <my-goods
        v-for="item in goodsList"
        :key="item.id"
        :item="item"
      ></my-goods>
      <!-- 循环渲染子组件  把item父传子传到子组件里 -->
    </div>
  </div>
</template>
<script>
import { getBanner, getNewsList, getGoodList } from "@/utils/home.js";
//引入 轮播图 新闻列表 商品列表三个请求接口
import { reactive, toRefs, ref } from "vue";
import myTitle from "@/components/myTitle.vue";
import myGoods from "@/components/myGoods.vue";
import { useRouter } from "vue-router";
export default {
  setup(props) {
    const router = useRouter();
    const data = reactive({
      bannerList: [],
      //保存轮播图数据
      newsList: [],
      //保存新闻列表数据
      goodsList: [],
      //保存商品列表数据
    });
    //
    getBanner().then((res) => {
      console.log(res);
      data.bannerList = res.data;
    });
    //轮播图数据
    getNewsList().then((res) => {
      console.log(res);
      data.newsList = res.data;
    });
    //文章列表数据

    getGoodList({ page: 3, pageSize: 4 }).then((res) => {
      console.log(res);
      data.goodsList = res.data;
    });
    //获取商品列表 获取第三页的四条数据 穿了参数 请求第三页的四条数据
    // 这里为什么要传参 因为我们拿到的 数据一共有18条但是在首页只需要四条 所以我们给后台一个 页码和每页四条 两个参数  后台就会根据参数给我们返回想要的四条数据

    const gotoList = (path) => {
      router.push(path);
    };
    //跳转列表页的路由
    return { ...toRefs(data), gotoList };
  },
  components: {
    myTitle,
    myGoods,
  },
};
</script>
<style lang="scss">
.home {
  padding-bottom: 50px;
}
.my-swipe {
  width: 100%;
  height: 375px;
  img {
    width: 100%;
    height: 100%;
  }
}

.header-wrap {
  width: 100%;
  height: 375px;
  position: relative;
  .icon {
    height: 100px;
    width: 100%;
    position: absolute;
    background: #fff;
    bottom: 0;
    left: 0;
    border-radius: 20px 20px 0 0;
  }
}
.news-wrap {
  width: 100%;
  overflow-x: auto;
  ul {
    display: flex;
    li {
      width: 320px;
      margin-left: 8px;
      flex-shrink: 0;
      // shrink是元素缩小不缩小的意思
      // 同样的有一个 flex-grow 代表的是元素放大或者不放大

      img {
        width: 100%;
        height: 200px;
      }

      p,
      h5 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
    }
  }
}
.good-wrap {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  div {
    width: 48%;
  }
}
</style>
